<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>监听键盘按键</title>
    <style>
      .app {
        width: 100px;
        height: 50px;
        border: 1px solid #000;
        position: relative;
      }
      .line {
        position: absolute;
        width: 2px;
        height: 100%;
        background-color: #000;
        left: 0;
        bottom: 0;
        transform: rotate(-60deg);
        transform-origin: bottom;
      }
    </style>
  </head>
  <body>
    <div>
      <!-- <input type="text" name="" id="" onkeyup="test()" /> -->
      <div class="app">
        <div class="line"></div>
      </div>
    </div>
    <script>
      // function test() {
      //   console.log(event.shiftKey);
      //   if (event.shiftKey && event.keyCode === 49) {
      //     alert(1);
      //   }
      // }
      document.onkeydown = function (event) {
        if (event.keyCode === 117) {
          alert("按了F6");
        }
      };
      const fnKeyMap = new Map([
        ["F1", 112],
        ["F2", 113],
        ["F3", 114],
        ["F4", 115],
        ["F5", 116],
        ["F6", 117],
        ["F7", 118],
        ["F8", 119],
        ["F9", 120],
        ["F10", 121],
        ["F11", 122],
        ["F12", 123],
      ]);

      const merge = (origin, target) => {
        if (typeof origin != "object" || typeof target != "object") return;
        const objString = Object.prototype.toString;
        for (const key in origin) {
          const originValue = origin[key];
          let targetValue;
          // 1. 数据查找和匹配
          if (
            objString.call(origin) === "[object Array]" &&
            objString.call(target) === "[object Array]"
          ) {
            // origin 和 target 都是数组类型
            if (typeof originValue === "object") {
              // 每个数组下的每条数据都有key 或者field作为唯一标识.
              const id = originValue.field ?? originValue.key;
              targetValue = target.find((tarItem) => {
                const targetId = tarItem.field ?? tarItem.key;
                return id === targetId;
              });
              if (!targetValue) {
                // 在target中没有找到指定数据
                targetValue = undefined;
                // targetValue = target[key];
              }
            } else {
              //
              targetValue = target[key];
              console.log(1111);
            }
          } else {
            // target 是对象
            targetValue = target[key];
          }

          // 2. 数据赋值合并
          if (
            typeof originValue != "object" &&
            targetValue != undefined &&
            typeof targetValue != "object"
          ) {
            origin[key] = target[key];
            console.log(2222);
          } else if (
            typeof originValue === "object" &&
            targetValue != undefined &&
            typeof targetValue === "object"
          ) {
            merge(originValue, targetValue);
          }
        }
        return origin;
      };

      const test1 = [1, 2, 3];
      const test2 = [100, 200, 300];
      const copy = merge(test1, test2);
      console.log(copy);
    </script>
  </body>
</html>
